import './index.scss'

export function loadingProgressBarOne() {
    return <div class='svg-container'>
        <svg>
            {/*<circle cx="50%" cy="50%" r="80" fill="transparent" stroke="#e0e0e0" stroke-width="5"/>*/}
            <circle id="loading-out"
                    cx="50%"
                    cy="50%"
                    r="80"
                    fill="transparent"
                    stroke="blue"
                    stroke-width="5"
                    stroke-linecap="round"
                    stroke-dasharray="400 1000"
            >
            </circle>
        </svg>
    </div>
}

export function loadingProgressBarTwo() {
    return <div class='svg-container'>
        <svg>
            <circle cx="50%"
                    cy="50%"
                    r="80"
                    fill="transparent"
                    stroke="blue"
                    stroke-width="5"
                    stroke-linecap="round"
                    stroke-dasharray="400 1000"
            >
                <animateTransform
                    attributeName="transform"
                    type="rotate"
                    from="0 90 90"
                    to="360 90 90"
                    dur="2s"
                    repeatCount="indefinite"/>
            </circle>
            <circle cx="50%"
                    cy="50%"
                    r="60"
                    fill="transparent"
                    stroke="green"
                    stroke-width="5"
                    stroke-linecap="round"
                    stroke-dasharray="300 1000"
            >
                <animateTransform
                    attributeName="transform"
                    type="rotate"
                    from="-180 90 90"
                    to="180 90 90"
                    dur="1s"
                    repeatCount="indefinite"/>
            </circle>
        </svg>
    </div>
}

export function loadingProgressBarThree() {
    return <div class='svg-container'>
        <svg>
            <circle cx="50%"
                    cy="50%"
                    r="80"
                    fill="transparent"
                    stroke="#e0e0e0"
                    stroke-width="5"
            >
            </circle>
            <circle cx="50%"
                    cy="10"
                    r="5"
                    fill="blue"
            >
                <animateTransform
                    attributeName="transform"
                    type="rotate"
                    from="-180 90 90"
                    to="180 90 90"
                    dur="2s"
                    repeatCount="indefinite"/>
            </circle>
        </svg>
    </div>
}

export function loadingProgressBarFour() {
    return <div class='svg-container'>
        <svg style="transform: rotateZ(180deg);transform-origin:center;">
            <rect x="50" y="40" width="4" height="80" fill="blue">
                <animate
                    attributeName="height"
                    values="30;80;30"
                    dur=".5s"
                    repeatCount="indefinite"/>
            </rect>
            <rect x="70" y="40" width="4" height="80" fill="blue">
                <animate
                    attributeName="height"
                    values="30;80;30"
                    dur=".5s"
                    begin="0.1s"
                    repeatCount="indefinite"/>
            </rect>
            <rect x="90" y="40" width="4" height="80" fill="blue">
                <animate
                    attributeName="height"
                    values="30;80;30"
                    dur=".5s"
                    begin="0.2s"
                    repeatCount="indefinite"/>
            </rect>
            <rect x="110" y="40" width="4" height="80" fill="blue">
                <animate
                    attributeName="height"
                    values="30;80;30"
                    dur=".5s"
                    begin="0.3s"
                    repeatCount="indefinite"/>
            </rect>
            <rect x="130" y="40" width="4" height="80" fill="blue">
                <animate
                    attributeName="height"
                    values="30;80;30"
                    dur=".5s"
                    begin="0.4s"
                    repeatCount="indefinite"/>
            </rect>
        </svg>
    </div>
}
